<template>
	<view>
		<htzImageUpload :max="max" :vmax="vmax" mediaType="all" @imgDelete='del' v-model="file" @uploadSuccess="afterRead"
			:action="action">
		</htzImageUpload>
	</view>
</template>

<script>
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	export default {
		components: {
			htzImageUpload
		},
		props: {
			value: {
				type: String,
				default: ''
			},
			vmax:{
				type: [String, Number],
				default: 0
			},
			imax:{
				type: [String, Number],
				default: 3
			},
			max: {
				type: [String, Number],
				default: 4
			}
		},
		data() {
			return {
				file: [],
				list: [],
				action: ''
			}
		},
		created() {
			this.action = getApp().globalData.rootUrl + '/common/upload';
		},
		watch: {
			value(val) {
				
				if (val == null) return;
				if (this.file.length > 0 && val != "") return;
				let vals = val.split(",");
				vals.forEach((res) => {

					if (res != "") {
						this.file.push({
							url: this.$imgUrl + res
						});
					}
					
				});
			}
		},
		methods: {
			del(event) {
				this.toValue();
			},
			toValue() {
				let data = [];
				this.file.forEach(res => {
					data.push(this.$project.getPathFromUrl(res));
				})
				
				this.$emit("input", data.toString(','));
			},
			afterRead(res) {

				let e = JSON.parse(res.data);
				if (e.code != 1) return $Toast(e.msg);
				this.file.push(e.data.fullurl);
				this.toValue();
			}
		}

	}
</script>

<style scoped lang="scss">

</style>